<div id="AddProject" class="scrollingContent">
    <form class="ui form" (ngSubmit)="createProject()">
        <h2>{{ 'project_create' | translate }}</h2>
        <div class="ui two column centered grid">
            <div class="column">
                <div class="field">
                    <label>{{ 'project_name' | translate }}</label>
                    <input type="text" name="projectname" [(ngModel)]="project.name" (keyup)="generateKey($event.target.value)">
                </div>
                <div class="ui error message" *ngIf="nameError">
                    {{ 'project_name_error' | translate }}
                </div>
                <div class="field">
                    <label>{{ 'project_key' | translate }}</label>
                    <input type="text" name="projectkey" [(ngModel)]="project.key">
                </div>
                <div class="field">
                    <label>{{ 'project_description' | translate }}</label>
                    <textarea type="text" name="projectdescription" [(ngModel)]="project.description"></textarea>
                </div>
                <div class="ui error message" *ngIf="keyError">
                    {{ 'project_key_error' | translate }}
                </div>

                <div class="field center aligned">
                    <label>{{ 'project_icon' | translate }} ({{'common_optional' | translate}})</label>
                    <div>
                        <div *ngIf="!fileTooLarge && project.icon">
                            <img class="proj-icon" [src]="project.icon" alt="icon"/>
                        </div>
                        <app-upload-button accept=".png,.jpg,.jpeg" image="true" (event)="fileEvent($event)">
                        </app-upload-button>
                    </div>
                </div>
                <div class="ui red message field" *ngIf="fileTooLarge"  [textContent]="'common_file_too_large' | translate"></div>

                <hr>

                <div class="ui message">
                  {{'project_add_group_help' | translate}}
                </div>
                <div class="field">
                  {{ 'project_permission_form_wizard_title' | translate }} <a class="pointing" (click)="modalCreateGroup.show()">{{ 'project_permission_form_wizard_new' | translate }}</a>
                  <sm-select class="fluid search"
                      [options]="{'fullTextSearch': true}"
                      [model]="group?.id"
                      (modelChange)="setGroup($event)"
                      id="PermissionGroup">
                      <option *ngFor="let g of groupList" [value]="g.id">{{g.name}}</option>
                  </sm-select>
                </div>

            </div>
            <div class="row">
                <div class="right aligned column">
                    <button class="ui green button" name="createproject" [class.loading]="loading"><i class="save icon"></i>{{ 'btn_create' | translate }}</button>
                </div>
            </div>
        </div>
    </form>
</div>
<sm-modal title="{{ 'group_create_title' | translate}}" class="fluid" #createGroupModal>
    <modal-content>
        <app-group-form mode="nonform" [group]="newGroup"></app-group-form>
    </modal-content>
    <modal-actions>
        <div class="ui grey button" (click)="modalCreateGroup.hide()">{{ 'btn_cancel' | translate }}</div>
        <div class="ui green button" name="creategroup" (click)="createGroup()" [class.loading]="loading" [class.disabled]="loading">{{ 'btn_create' | translate }}</div>
    </modal-actions>
</sm-modal>
